<template>
  <div class="ml-10px main" @contextmenu.prevent="resetPosition()">
    <div ref="imgBoxRef" class="img_box">
      <div class="img_box-item" :style="{ transform: 'scale(' + multiples + ')', transformOrigin: 'center center' }">
        <img
          ref="dragRef"
          v-drag
          :src="imgSrc"
          alt=""
          :style="{ transform: 'rotateZ(' + deg + 'deg)' }"
          @mousewheel="mousewheel"
        />
      </div>
    </div>

    <div class="btn">
      <!-- 放大0.25 -->
      <el-button color="#071328" title="放大" type="primary" size="large" @click="magnify">
        <template #icon>
          <el-icon><Plus /></el-icon>
        </template>
      </el-button>
      <!-- 缩小0.25 -->
      <el-button color="#071328" title="缩小" type="primary" size="large" @click="shrink">
        <template #icon>
          <el-icon><Minus /></el-icon>
        </template>
      </el-button>
      <!-- 点击时旋转90度 -->
      <el-button color="#071328" title="旋转" type="primary" size="large" @click="rotate">
        <template #icon>
          <el-icon><RefreshRight /></el-icon>
        </template>
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
defineProps<{
  imgSrc: string;
}>();

const multiples = ref<number>(1);
const deg = ref<number>(0);
// 放大
const magnify = () => {
  if (multiples.value >= 10) {
    return;
  }
  multiples.value += 1;
};
// 缩小
const shrink = () => {
  if (multiples.value <= 1) {
    return;
  }
  multiples.value -= 1;
};

//旋转
const rotate = () => {
  deg.value += 45;
  if (deg.value >= 360) {
    deg.value = 0;
  }
};

// 鼠标滚轮
const mousewheel = (e: any) => {
  let direction = e.wheelDelta > 0 ? 'up' : 'down'; //deltaY为正则滚轮向下，为负滚轮向上
  if (direction == 'down') {
    // console.log('滚轮向下,缩小');
    shrink();
  } else {
    // console.log('滚轮向上,放大');
    magnify();
  }
};

const dragRef = ref<HTMLElement | null>(null);
const imgBoxRef = ref<HTMLElement | null>(null);

// 鼠标右键回到原始位置
const resetPosition = () => {
  multiples.value = 1;
  deg.value = 0;
  if (dragRef.value) {
    dragRef.value.style.left = '0';
    dragRef.value.style.top = '0';
  }
};
</script>
<style scoped lang="scss">
.main {
  position: reactive;
  width: 600px;
  height: 600px;
  border-top: 1px solid rgba(186, 186, 186, 0.1);
  border-left: 1px solid rgba(186, 186, 186, 0.1);
  border-radius: 8px;
  box-shadow: 8px 8px 10px rgba(8, 20, 41, 0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.img_box {
  width: 500px;
  height: 500px;
  // border: 1px solid #071328;
  border-top: 1px solid rgba(186, 186, 186, 0.1);
  border-left: 1px solid rgba(186, 186, 186, 0.1);
  border-radius: 8px;
  box-shadow: 8px 8px 10px rgba(8, 20, 41, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: 10px;
  .img_box-item {
    width: 300px;
    height: 300px;
    img {
      width: 100%;
      height: 100%;
      position: absolute;
    }
  }
}
.btn {
  height: 100px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
</style>
